<!--
 * @Author: Your Name you@example.com
 * @Date: 2023-05-15 22:07:41
 * @LastEditors: Your Name you@example.com
 * @LastEditTime: 2023-05-19 02:20:33
 * @FilePath: \elder-admin\src\components\AdminManager.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: Your Name you@example.com
 * @Date: 2023-05-15 22:07:41
 * @LastEditors: Your Name you@example.com
 * @LastEditTime: 2023-05-16 10:48:25
 * @FilePath: \elder-admin\src\components\AdminManager.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <el-table :data="tableData" style="width: 100%" max-height="500px">
            <el-table-column prop="user_id" label="用户ID" width="250" />
            <el-table-column prop="username" label="用户姓名" width="250" />
            <el-table-column prop="password" label="用户密码(已加密)" width="250" />
            <el-table-column prop="user_type" label="用户类型" width="250" />
            <el-table-column fixed="right" label="Operations" width="120">
            <template #default="scope">
                <el-button link type="primary" size="small"
                @click.prevent="updateRow(scope.row,scope.row.user_id,scope.row.username,scope.row.password)">
                修改
                </el-button>
                <el-dialog
                    v-model="dialogVisible"
                    title="Tips"
                    width="30%"
                >
                    <span>姓名：</span>
                    <el-input v-model="name"></el-input>
                    <span>密码：</span>
                    <el-input v-model="pwd"></el-input>
                    <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="toSubmit()">
                        确定
                        </el-button>
                    </span>
                    </template>
                </el-dialog>
                <el-button link type="danger" size="small"
                @click.prevent="deleteRow(scope.row.user_id)">
                删除
                </el-button>
            </template>
            </el-table-column>
        </el-table>
        <el-button class="mt-4" style="width: 100%" @click="onAddItem"
            >Add Item</el-button
        >
    </div>
</template>

<script setup>
import { ref,onBeforeMount } from 'vue'
import service from '../api/service'
const dialogVisible = ref(false)
const chooseId = ref()
const s = ref()
let name = ref('')
let pwd = ref('')
onBeforeMount(()=>{
    const x = localStorage.getItem("token")
    service({
    url:'/fapi/api/admin/admin/',
    method:'GET',
    params:{
        'token':x
    }
    }).then((res)=>{
            console.log(res.data)
            tableData.value = res.data
        }).catch((e)=>{
            console.log(e)
            console.log("报错")
        })
})
const tableData = ref([
 
])
const updateRow=(row,id,name1,pwd1)=>{
    s.value = row
    chooseId.value = id
    dialogVisible.value = true
    name.value = name1
    pwd.value = pwd1
}
const deleteRow = (id) => {
    service({
    url:'/fapi/api/admin/admin?token='+localStorage.getItem('token')+'&user_id='+id,
    method:"DELETE"
  }).then((res)=>{
    console.log(res)
    window.location.reload()
  })
}

const onAddItem = () => {
    dialogVisible.value = true
    name.value = ''
    pwd.value = ''
}
const toSubmit=()=>{
    dialogVisible.value = false
    const xx = chooseId.value
    console.log(xx)
    console.log(localStorage.getItem("token"))
    if(!xx){
        service({
            url:'/fapi/api/admin/admin?token='+localStorage.getItem('token'),
            method:"POST",
             data:{
                username:name.value,
                password:pwd.value
            }
        }).then((res)=>{
            console.log(res.data)
            tableData.value.push(res.data)
        })
    }else{
        service({
            url:'/fapi/api/admin/admin?token='+localStorage.getItem('token'),
            method:"PUT",
             data:{
                username:name.value,
                password:pwd.value,
                user_id:parseInt(chooseId.value)
            }
        }).then((res)=>{
            console.log(res.data)
            s.value.username = res.data.username
            s.value.password = res.data.password
        })
    }
}
</script>

<style lang="scss" scoped>

</style>